<template>
	<view class="unt-shop-list-content flex flex-wrap">
		<template v-if="mode=='curd'">
			<view class="curd-item"  v-for="(item,index) in data" :key="index" @click="toShopDetails(item.goodsId)">
				<view class="item-image" :style="{width:imgWidth,height:imgHeight}">
					<image class="image" :src="item.image.url" mode="aspectFill"></image>
				</view>
				<view class="item-title-desc-price">
					<view class="item-title">{{item.goodsName}}</view>
					<view class="item-desc">{{item.sellingPoint}}</view>
					<view class="item-price-cart flex-sb">
						<view class="price">¥<text class="price-num">{{item.goodsPriceMin}}</text>
							<text class="origina-price">¥{{item.linePriceMax}}</text>
						</view>
						<view class="cart">
							<unt-icon name="icon-cart-fill" color="#fff" size="14"></unt-icon>
						</view>
					</view>
				</view>

			</view>
		</template>
		<template v-else>
			<view class="list-item flex-sb" v-for="(item,index) in data" :key="index"
				@click="toShopDetails(item.goodsId)">
				<view class="item-image" :style="{width:imgWidth,height:imgHeight}">
					<image class="image" :src="item.image.url" mode="aspectFill"></image>
				</view>
				<view class="list-right">
					<view class="title-desc">
						<view class="item-title">{{item.goodsName}}</view>
						<view class="item-desc">{{item.sellingPoint}}</view>
					</view>
					<view class="item-price-cart flex-sb">
						<view class="price">¥<text class="price-num">{{item.goodsPriceMin}}</text>
							<text class="origina-price">¥{{item.linePriceMax}}</text>
						</view>
						<view class="cart">
							<unt-icon name="icon-cart-fill" color="#fff" size="18"></unt-icon>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import props from "./props.js"
	export default {
		mixins: [props],
		methods: {
			randomStyle(){
				const PROBABILITY_THRESHOLD = 0.7;
				let jo = 0, index = 0, spilt = 8;
				for (let i = 0, size = 100; i < size; i++) {
				    if(i-index > spilt){
				        let isOdd = i % 2 !== 0;
				        let v = Math.random();
				        if(isOdd === jo ? false : v > PROBABILITY_THRESHOLD){
				            jo ^= 1; // toggle jo between 0 and 1
				            index = i;
				        }
				    }
				}
			},
			toShopDetails(ids) {
				this.$unts.navTo("pages_moon/goods/detail/detail", {
					id: ids
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.unt-shop-list-content {
		padding: 10rpx;
		margin-top: 30rpx;
		justify-content: space-between;

		.curd-item,
		.list-item {
			width: calc(50% - 14rpx);
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 4rpx 4rpx 10rpx #F5F6FA, -4rpx -4rpx 10rpx #F5F6FA;
			border-radius: 18rpx;
			padding: 20rpx;

			.item-image {
				width: 300rpx;
				height: 300rpx;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.item-title {
				margin: 10rpx 0rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28rpx;
			}

			.item-desc {
				color: #999;
				font-size: 28rpx;
				margin: 10rpx 0rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.item-price-cart {
				.price {
					color: #FC483C;

					.price-num {
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.origina-price {
					font-size: 24rpx;
					color: #999;
					margin-left: 10rpx;
					text-decoration: line-through
				}

				.cart {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: linear-gradient(to right, #01AB36, #056523);
					// background-color: #01ab36;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}
		.curd-item{
			padding: 0px;
			.item-image{
				width: 100%;
				max-height: 350rpx;
			}
			.item-title-desc-price{
				padding: 20rpx;
			}
		}
		.curd-item:nth-child(2n) {
			margin-right: 0rpx
		}

		.list-item {
			width: 100%;
			min-height: 260rpx;
			max-height: 300rpx;
			margin: 0;
			box-shadow: none;
			padding: 10rpx 20rpx;

			.item-image {
				width: 240rpx;
				height: 240rpx;
				flex-shrink: 0;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.list-right {
				min-height: 260rpx;
				height: 100%;
				position: relative;
				margin-left: 20rpx;
				overflow-x: hidden;

				.item-price-cart {
					width: 100%;
					position: absolute;
					bottom: 0rpx;

					.cart {
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
					}
				}
			}
		}
	}
</style>